{% extends 'base.html' %}
{% block title %}加入我们{% endblock %}
{% block body %}
        <nav class="navbar navbar-dark bg-dark navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="{% url 'home' %}">首页</a>
            <a class="navbar-brand" href="{% url 'answer' %}">在线答题系统</a>
            <a class="navbar-brand" href ="#">平台生态</a>
            <a class="navbar-brand" href="{% url 'join_us' %}">加入我们</a>
            <a class="navbar-brand" href="https://blog.csdn.net/sabermmm?spm=1010.2135.3001.5421">联系作者</a>
            <a class="navbar-brand " href="{% url 'home_logout' %}">退出<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-backspace" viewBox="0 0 16 16">
  <path d="M5.83 5.146a.5.5 0 0 0 0 .708L7.975 8l-2.147 2.146a.5.5 0 0 0 .707.708l2.147-2.147 2.146 2.147a.5.5 0 0 0 .707-.708L9.39 8l2.146-2.146a.5.5 0 0 0-.707-.708L8.683 7.293 6.536 5.146a.5.5 0 0 0-.707 0z"/>
  <path d="M13.683 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-7.08a2 2 0 0 1-1.519-.698L.241 8.65a1 1 0 0 1 0-1.302L5.084 1.7A2 2 0 0 1 6.603 1h7.08zm-7.08 1a1 1 0 0 0-.76.35L1 8l4.844 5.65a1 1 0 0 0 .759.35h7.08a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-7.08z"/>
            </svg></a>
        </div>
      </div>
    </nav>
{#巨幕#}
    <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <h1 class="display-4">欢迎加入我！</h1>
        <p class="lead">欢迎想加入我一起学习前沿技术</p>
          <p class="lead">感兴趣的同学可联系作者</p>
          <p>
              <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                申请加入
              </button>
          </p>
            <div class="collapse" id="collapseExample">

                <div class="card card-body">
                    2.有强烈意愿者,直接与协会会长沟通可填写相关信息提交申请，申请将在三天内得到审批答复并将结果发送至邮箱
                </div>
                <div class="card card-body">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">填报申请</button>
                </div>
            </div>
      </div>
    </div>

{#申请填报#}
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">填报申请</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
        <form action="/join_us/" method="POST">
          <div class="modal-body">

              <div class="form-group">
                <label for="recipient-name" class="col-form-label">申请人姓名:</label>
                <input type="text" class="form-control" name="name_apply">
                  年级<input type="text" class="form-control" name="nianji_apply">
                  专业<input type="text" class="form-control" name="zhuanyei_apply">
              </div>
              <div class="form-group">
                <label for="message-text" class="col-form-label">自我介绍:</label>
                <textarea class="form-control" name="text_apply"></textarea>
              </div>

          </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button  id="seb_btn" type="submit"  class="btn btn-primary">提交</button>
              </div>
             </form>
                <div id="loa" class="text-center" style="display: none;">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Loading...</span>
                      </div>
                    </div>
    </div>
  </div>
</div>

    <script>
        function login(){
        document.getElementById("seb_btn").style.display="none";
        document.getElementById("loa").style.display="";
        setTimeout(load, 4000);
    }
    function load(){
        document.getElementById("seb_btn").style.display="";
        document.getElementById("loa").style.display="none";
        }
    </script>
{% endblock %}
